<template>
  <div class="dialog">
    <div class="wrapper">
      <div class="top">
        <div class="icons">
          <i :class="modeCls" @click="changeMode"></i>
        </div>
        <span>{{ modeTxt }}</span>
        <i class="icon-clear" @click.stop="showConfirm"></i>
      </div>
      <confirm txt="确认清空播放列表吗?" @confirm="toConfirm" v-if="isShow"></confirm>
      <scroll class="middle" ref="scroll">
        <ul class="group">
          <li class="item"
              v-for="(song,index) in songs"
              :key="index"
              @click="selectSong(song)"
              ref="dialogSong">
            <i :class="playCls(song)"></i>
            <span class="name">{{ song.name }}</span>
            <div class="ops">
              <i :class="likeIcon(song)" @click.stop="toggleLike(song)"></i>
              <i class="icon-delete" @click.stop="removeSong(index)"></i>
            </div>
          </li>
        </ul>
      </scroll>
      <div class="btn">
        <i class="icon-add"></i>
        <span @click="flag = true">添加歌曲到队列</span>
      </div>
      <div v-show="flag">
        <add-song @hide="flag = false"></add-song>
      </div>
      <div class="bottom">
        <h1 @click="hideDialog">关闭</h1>
      </div>
    </div>
  </div>
</template>

<script>
  import Scroll from "@/base/scroll/Scroll";
  import addSong from "@/components/add-song/addSong";
  import Confirm from "@/base/confirm/Confirm";
  import {likeListOptions, modeChange} from "@/common/js/mixin";
  import {mapMutations} from 'vuex'
  import {confirm,dialog} from "@/config/mode-config/config";

  export default {
        name: "Dialog",
        components: {Scroll,Confirm,addSong},
        mixins: [modeChange,likeListOptions],
        data(){
            return {
                flag: false
            }
        },
        props: {
            songs: {
                type: Array,
                default(){return []}
            },
            currentSong: {
                type: Object,
                default: null
            }
        },
        computed: {
            isShow(){
                return this.$store.getters.confirm
            }
        },
        methods: {
            ...mapMutations('song',['removeSong','clearSongs']),
            showConfirm(){
                this.$store.commit('setConfirm',confirm.show)
            },
            toConfirm(flag){
                if(!flag)  return
                this.clearSongs()
                this.hideDialog()
            },
            hideDialog(){
                this.$store.commit('setDialogFlag',dialog.hide)
            },
            playCls(song){
                return this.currentSong.id === song.id ? 'icon-play' : ''
            },
            selectSong(song){
                this.$emit('select',song)
                this.scrollToCurrent(song)
            },
            scrollToCurrent(current){
               let index = this.songs.findIndex(item=>{
                    return item.id === current.id
                })
                this.$refs.scroll.scrollToEle(this.$refs.dialogSong[index],1000)
            }
        },
        watch: {
            currentSong(newSong,oldSong){
                if(newSong.id === oldSong)  return
                this.scrollToCurrent(newSong)
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .dialog
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    background rgba(7,7,7,0.6)
    z-index 300
    .wrapper
      position absolute
      bottom 0
      top 30%
      width 100%
      background $color-highlight-background
      padding 10px 30px 30px 8px
      box-sizing border-box
      .top
        position relative
        .icons
          display inline
          font-size 2rem
          color $color-theme
        span
          vertical-align 1ex
          color $color-text-l
          margin-left 10px
        .icon-clear
          position absolute
          right 0
          top 1ex
          color $color-text-l
      .middle
        position fixed
        top 40%
        left 10px
        right 30px
        bottom 130px
        padding-top 10px
        overflow hidden
        .group
          padding-bottom 10px
          .item
            position relative
            box-sizing border-box
            margin 45px 0
            .icon-play
              color $color-theme
            .name
              display inline-block
              color $color-text-l
              margin-left 1rem
              white-space nowrap
              text-overflow ellipsis
              overflow hidden
              max-width 320px
            .ops
              position absolute
              right 0
              top 0
              color $color-theme
              width 12%
              display flex
              justify-content space-between
      .btn
        position absolute
        bottom 80px
        left 50%
        transform translate(-50%)
        box-sizing border-box
        border 1px solid $color-text-l
        padding 10px 20px
        color $color-text-l
        font-size $font-size-medium
        border-radius 20px
        .icon-add
          margin-right 10px
      .bottom
        position fixed
        height 50px
        bottom 0
        width 100%
        background $color-background
        h1
          color $color-text-ll
          line-height 50px
          font-size $font-size-large
          text-align center
  .red
    color $color-sub-theme
</style>
